import React, {Component} from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // ES6

export default class Animation extends Component{
    constructor(props){
        super(props)
        this.state = {
            textList : [{text:'first', id:'0'}],
            txt:''
        }
    }

    render(){
        // 创建元素
        const result = this.state.textList.map(item=>{
            return <li key={item.id} data-id={item.id} onClick={this.handleRemoveItem}>{item.text}</li>
        });
        return <div>
            <div>
                <input type="text" value={this.state.txt} onChange={this.handleTxtChange}/>
                <input type="button" value="add" onClick={this.handleBtnAdd}/>
            </div>
            <ul>
                <ReactCSSTransitionGroup
                    transitionName="example"
                    transitionAppear={true}
                    transitionAppearTimeout={500}
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={300}>
                    {result}
                </ReactCSSTransitionGroup>
            </ul>
        </div>
    }

    // 文本框改变事件
    handleTxtChange = (e)=>{
        this.setState({txt:e.target.value});
    }

    // 点击添加按钮
    handleBtnAdd = ()=>{
        // 如果文本框值为空，则直接反馈
        if(this.state.txt.trim().length<=0){
            return;
        }

        // 拼接出一个新数组
        var listNew = this.state.textList.concat({text:this.state.txt, id:Date.now()});
        // 将拼接出来的新数组，设置为当前的state
        this.setState({
            textList:listNew
        }, function(){
            this.setState({'txt':''});
        });
    }

    // 点击删除元素
    handleRemoveItem = (e)=>{
        // 使用e.target.dataset.[属性],获取data-*中的属性值
        // console.log(e.target.dataset.id);
        // 使用数组的findIndex方法，获取数组中某个元素的属性
        var index = this.state.textList.findIndex(x=>{
            return x.id == e.target.dataset.id;
        });
        //使用Object.assign(目标对象,源对象)这个方法，实现对象属性的，返回值为新对象
        var tempList = Object.assign([], this.state.textList);
        tempList.splice(index, 1);
        this.setState({textList:tempList});
    }
}